<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript"
	src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
<div class="span12">
<div class="box gradient">
<div class="title">		
<h4><span>Pending Comment</span></h4>
<a href="#" class="minimize">Minimize</a></div>
<div class="content scrollable clearfix">
<input type="hidden" class = "filterdata" op ="cn" value="pending", field="status"></input>
<table class="ajaxTable display table table-bordered">
	<thead>
		<tr>
			<th><a id="select_all"></th>
			<th>Post Title</th>
			<th>Author</th>
			<th>Content</th>
			<th>Comment Date</th>
			<th>Action</th>
		</tr>
	</thead>
</table>
</div>
</div>

</div>

<shiro:hasPermission name="post:create">
	<a id="approve" href="#" class="btn btn-info"> <span
		class="icon12 icomoon-icon-plus white"></span> Approve</a>
	<a href="#" class="btn btn-info"> <span
		class="icon12 icomoon-icon-plus white"></span> Reject</a>
</shiro:hasPermission>
</div>



<script type="text/javascript">

var render = false;
var oTime = "";
var oTable;
$(document).ready(function () {
	$("#approve").click(function(){
 		var items = johnny.select();
		
		if(items && items.length <=0){
			johnny.warning("Please select at least one commend for approve");
			return false;
		}
 		if(confirm("Confirm to approve the selected commends?")){
			$.ajax({
				url : "${ctx}/post-comment/approve/",
				type : "POST",
				data : {"_method" : "PUT", "ids" : items},
				dataType : "json",
				success : function(data){
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						alert(data.message);
						return;
					}
					johnny.success("Approve comment successfully");
					updateGrid();
				}
			});
			
			return false;
		}
		
		return false;
	});

	
	oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"aoColumnDefs": [
		  { 'bSortable': false, 'aTargets': [0,3] }
		],
		"sAjaxSource": '${ctx}/post-comment/',
		"fnInitComplete": function (oSettings, json) { }
	});

	
	johnny.resetFilter($('.reset'));

	$(".datepickerlazy").datepicker({
		dateFormat: 'yy-mm-dd',
		onSelect: function () {
			updateGrid();
		}
	}).keydown(function (event) {
		if (event.keyCode == 8) { $(".datepickerlazy").val(""); }
		else { event.preventDefault(); }
	});

	$(".filterdata").keyup(function () {
		updateGrid();
	});
 });
function updateGrid() {
	window.clearTimeout(oTime);
	oTime = setTimeout(function () { oTable.fnDraw(); }, 500);
}

var columnHeader = ['','post.title','author', 'content', 'commentDate'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}
function selectHtml(id){
	var orderNo = $("<input>").attr({
		type: "checkbox",
		value:  id,
    	 class : "forselect"
 	});
	
	var mainSpan = $("<span>");
	var span = $(orderNo).appendTo(mainSpan);
	return mainSpan.html();
	 
	
}
var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		subArray.push(selectHtml(json.result[i].id));
		subArray.push(json.result[i].post.title);
		subArray.push(json.result[i].author);
		subArray.push(json.result[i].content);
		subArray.push(json.result[i].commentDate);
		
		subArray.push(actionHtml(json.result[i].id));
		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
function actionHtml(id) {
	var mainSpan = $("<span>");
	var controlDiv = $("<div>").addClass("controls center").appendTo(mainSpan);
	var href = $("<a>").attr({
		href: "${ctx}/post/"+id+"/edit/",
		title: "Edit"
	}).addClass("tip").appendTo(controlDiv);
	var span = $("<span>").addClass("icon12 icomoon-icon-pencil").appendTo(href);
	return mainSpan.html();
}
</script>
<body>